// 导入 react 依赖包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 列表渲染
const books1 = ['React', 'Vue', 'Angular'];

const books2 = [
  <li key={1}>React</li>,
  <li key={2}>Vue</li>,
  <li key={3}>Angular</li>,
];

const jsx1 = <div>{books1}</div>;
const jsx2 = <div>{books2}</div>;

// 列表渲染 ['React', 'Vue', 'Angular'] =》[<li>React</li>, <li>Vue</li>, <li>Angular</li>]
// 数组 ，转化数据格式的api，
const books3 = books1.map((item, index) => {
  console.log(index);
  return <li key={index}>{'《' + item + '》'}</li>;
});
const jsx3 = <div>{books3}</div>;

const books4 = [
  { id: 1, name: 'React1' },
  { id: 2, name: 'Vue2' },
  { id: 3, name: 'Angular3' },
];
const jsx4 = (
  <div>
    {books4.map((item) => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);

root.render(jsx4);
